<template>
	<el-form ref="form" :model="user" :rules="rules" label-width="80px" style="height: 435px;position: relative;">
		<div>
			<el-form-item label="旧密码" prop="oldPassword">
				<el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password />
			</el-form-item>
			<el-form-item label="新密码" prop="newPassword">
				<el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password />
			</el-form-item>
			<el-form-item label="确认密码" prop="confirmPassword">
				<el-input v-model="user.confirmPassword" placeholder="请确认新密码" type="password" show-password />
			</el-form-item>
			<el-form-item label="提示:">
				<span style="color: red;">密码长度大于8位，最好包含字母数字和符号，不要使用纯数字的密码</span>
			</el-form-item>
		</div>
		<div style="position: absolute;right:0;bottom:10px;">
			<el-button type="primary" size="mini" @click="submit">更新密码</el-button>
			<el-button type="danger" size="mini" @click="resetForm('form')">清空</el-button>
		</div>
	</el-form>
</template>

<script>
import {
	userChangePwd
} from "@/api/apis/userInformation";

export default {
	data() {
		const equalToPassword = (rule, value, callback) => {
			if (this.user.newPassword !== value) {
				callback(new Error("两次输入的密码不一致"));
			} else {
				callback();
			}
		};
		return {
			user: {
				oldPassword: undefined,
				newPassword: undefined,
				confirmPassword: undefined
			},
			// 表单校验
			rules: {
				oldPassword: [{
					required: true,
					message: "旧密码不能为空",
					trigger: "blur"
				}],
				newPassword: [{
					required: true,
					message: "新密码不能为空",
					trigger: "blur"
				},
				{ min: 8, max: 20, message: "长度在 8 到 20 个字符", trigger: "blur" }
				],
				confirmPassword: [{
					required: true,
					message: "确认密码不能为空",
					trigger: "blur"
				},
				{
					required: true,
					validator: equalToPassword,
					trigger: "blur"
				}
				]
			}
		};
	},
	methods: {
		submit() {
			let that = this
			this.$refs["form"].validate(valid => {
				if (valid) {
					let params = {
						id: that.$store.state.user.info.userID,
						oldpwd: that.user.oldPassword,
						newpwd: that.user.newPassword
					}
					userChangePwd(params).then(response => {
						this.$modal.msgSuccess("修改成功");
						for (let i in this.user) {
							this.user[i] = ""
						}
					});
				}
			});
		},
		close() {
			this.$tab.closePage();
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}

	}
};
</script>
